<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.74.1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Flutter Web 评测第一篇 | caijinglong的博客</title>
    <meta property="og:title" content="Flutter Web 评测第一篇 - caijinglong的博客">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content="2019-05-08T10:15:07&#43;08:00">
        
        
    <meta property="article:modified_time" content="2019-05-08T10:15:07&#43;08:00">
        
    <meta name="Keywords" content="golang,go语言,flutter,caijinglong,java,android,博客,项目管理,python,软件架构,公众号,小程序">
    <meta name="description" content="Flutter Web 评测第一篇">
        
    <meta name="author" content="caijinglong">
    <meta property="og:url" content="http://www.kikt.top/posts/flutter/flutter-web/flutter-web1/">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/css/normalize.css">
    
        <link rel="stylesheet" href="/css/prism.css">
    
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    

   
    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

    
    
</head>

<body>
<header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="http://www.kikt.top">
                        caijinglong的博客
                    </a>
                
                <p class="description">Android/Flutter开发者，对于golang/python/ios/java 均有所了解</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="" href="http://www.kikt.top">首页</a>
                    
                    <a  href="http://www.kikt.top/archives/" title="归档">归档</a>
                    
                    <a  href="http://www.kikt.top/contact/" title="接单">接单</a>
                    
                    <a  href="http://www.kikt.top/about/" title="关于">关于</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">
                    <article class="post">
                        <header>
                            <h1 class="post-title">Flutter Web 评测第一篇</h1>
                        </header>
                        <date class="post-meta meta-date">
                            2019年5月8日
                        </date>
                        
                        <div class="post-meta meta-category">
                            |
                            
                                <a href="http://www.kikt.top/categories/flutter">flutter</a>
                            
                        </div>
                        
                        
                        <div class="post-meta">
                            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span> 阅读</span></span>
                        </div>
                        
                        <div class="post-content">
                            <p>最近 2019 的 google io 大会开始了,之前的&quot;蜂鸟&quot;引擎也在 flutter 官网中出现了, 不过这次改了个名字叫 <a href="https://github.com/flutter/flutter_web">flutter-web</a></p>
<p>具体的使用步骤参考项目 readme 中的方式来使用</p>
<ul>
<li><a href="#%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE">构建项目</a></li>
<li><a href="#%E8%BF%90%E8%A1%8C%E9%A1%B9%E7%9B%AE">运行项目</a>
<ul>
<li><a href="#%E7%AE%80%E5%8D%95%E8%BF%90%E8%A1%8C">简单运行</a></li>
<li><a href="#%E6%B5%8B%E8%AF%95%E4%BA%A4%E4%BA%92">测试交互</a></li>
<li><a href="#%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5">文本输入</a></li>
<li><a href="#%E5%9B%BE%E7%89%87">图片</a>
<ul>
<li><a href="#%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87">网络图片</a></li>
<li><a href="#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6">本地资源文件</a></li>
<li><a href="#%E5%86%85%E5%AD%98%E5%9B%BE%E7%89%87">内存图片</a></li>
</ul>
</li>
<li><a href="#%E6%BB%9A%E5%8A%A8%E6%8E%A7%E4%BB%B6">滚动控件</a></li>
</ul>
</li>
<li><a href="#%E6%97%A5%E5%BF%97">日志</a></li>
<li><a href="#%E5%87%A0%E4%B8%AA%E9%97%AE%E9%A2%98%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F">几个问题需要注意</a>
<ul>
<li><a href="#%E6%95%B0%E5%AD%97%E7%9A%84%E7%B1%BB%E5%9E%8B">数字的类型</a></li>
<li><a href="#dartio-%E7%9A%84%E9%97%AE%E9%A2%98">dart:io 的问题</a></li>
<li><a href="#%E6%8F%92%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8">插件的使用</a></li>
</ul>
</li>
<li><a href="#%E6%89%93%E5%8C%85">打包</a></li>
<li><a href="#%E6%9F%A5%E7%9C%8B%E4%B8%80%E4%B8%8B-html-%E7%BB%93%E6%9E%84">查看一下 html 结构</a></li>
<li><a href="#%E5%90%8E%E8%AE%B0">后记</a></li>
</ul>
<h2 id="构建项目">构建项目</h2>
<p>建议: 配置<code>dart</code>,<code>pub</code>,<code>~/.pub-cache/bin</code>到环境变量</p>
<p>配置 webdev</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">git clone https://github.com/flutter/flutter_web.git
cd flutter_web/examples/hello_world/
flutter packages upgrade
flutter packages pub global activate webdev
</code></pre></div><h2 id="运行项目">运行项目</h2>
<h3 id="简单运行">简单运行</h3>
<p>运行</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">webdev serve
</code></pre></div><p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508102705.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508102705.png"></p>
<p>提示我们,在本地 8080 端口, 在浏览器打开 http://localhost:8080</p>
<p>默认的 main.dart 比较简单,只有一个 Text 控件</p>
<p>我这里修改一下 main.dart 文件,达到接近 flutter 移动项目 main.dart 的样子</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#75715e">// Copyright 2018 The Chromium Authors. All rights reserved.
</span><span style="color:#75715e">// Use of this source code is governed by a BSD-style license that can be
</span><span style="color:#75715e">// found in the LICENSE file.
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_web/material.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#75715e">// This widget is the root of your application.
</span><span style="color:#75715e"></span>  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> MaterialApp(
      title: <span style="color:#e6db74">&#39;Flutter Demo&#39;</span>,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: <span style="color:#e6db74">&#39;Flutter Demo Home Page&#39;</span>),
    );
  }
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyHomePage</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  MyHomePage({Key key, <span style="color:#66d9ef">this</span>.title}) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(key: key);

  <span style="color:#66d9ef">final</span> <span style="color:#66d9ef">String</span> title;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  _MyHomePageState createState() <span style="color:#f92672">=&gt;</span> _MyHomePageState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_MyHomePageState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>MyHomePage<span style="color:#f92672">&gt;</span> {
  <span style="color:#66d9ef">int</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
  TextEditingController controller <span style="color:#f92672">=</span> TextEditingController();

  <span style="color:#66d9ef">void</span> add() {
    counter<span style="color:#f92672">++</span>;
    setState(() {});
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
            <span style="color:#75715e">// TextField(
</span><span style="color:#75715e"></span>            <span style="color:#75715e">//   controller: controller,
</span><span style="color:#75715e"></span>            <span style="color:#75715e">// ),
</span><span style="color:#75715e"></span>            Text(counter.toString()),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: add,
        tooltip: <span style="color:#e6db74">&#39;push&#39;</span>,
        child: Icon(Icons.add),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> initState() {
    <span style="color:#66d9ef">super</span>.initState();
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> initState&#34;</span>);
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> dispose() {
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> dispose&#34;</span>);
    <span style="color:#66d9ef">super</span>.dispose();
  }
}
</code></pre></div><p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508102830.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508102830.png"></p>
<p>这里看到了第一个问题, 图标没有显示</p>
<h3 id="测试交互">测试交互</h3>
<p>然后简单试一下页面的交互</p>
<p>遇到了第二个问题
<img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2FKapture-2019-05-08-at-10.30.56.gif&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="Kapture 2019-05-08 at 10.30.56.gif"></p>
<p>文字无法选中, 这个可以理解,因为是自绘引擎, 和网页不一样,文字无法选中是正常的</p>
<h3 id="文本输入">文本输入</h3>
<p>试一下文本输入</p>
<p>修改文件的 state 部分</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyHomePage</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  MyHomePage({Key key, <span style="color:#66d9ef">this</span>.title}) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(key: key);

  <span style="color:#66d9ef">final</span> <span style="color:#66d9ef">String</span> title;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  _MyHomePageState createState() <span style="color:#f92672">=&gt;</span> _MyHomePageState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_MyHomePageState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>MyHomePage<span style="color:#f92672">&gt;</span> {
  <span style="color:#66d9ef">int</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
  TextEditingController controller <span style="color:#f92672">=</span> TextEditingController();
  <span style="color:#66d9ef">var</span> key <span style="color:#f92672">=</span> GlobalKey();
  <span style="color:#66d9ef">void</span> add() {
    counter<span style="color:#f92672">++</span>;
    setState(() {});
    ScaffoldState state <span style="color:#f92672">=</span> key.currentState;
    state.showSnackBar(
      SnackBar(
        content: Text(controller.text),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      key: key,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
            TextField(
              controller: controller,
            ),
            Text(counter.toString()),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: add,
        tooltip: <span style="color:#e6db74">&#39;push&#39;</span>,
        child: Icon(Icons.add),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> initState() {
    <span style="color:#66d9ef">super</span>.initState();
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> initState&#34;</span>);
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> dispose() {
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> dispose&#34;</span>);
    <span style="color:#66d9ef">super</span>.dispose();
  }
}
</code></pre></div><p>加入了一个 TextField 控件,然后输入文本,接着将文本显示到 snackbar 中,接着点击按钮得到以下的样式</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508103820.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508103820.png"></p>
<p>文本的输入等功能基本能实现</p>
<p>嗯,中文输入可用,直接用的是系统的输入法,不过输入框没有跟随</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508104258.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508104258.png"></p>
<p>长按输入框位置无效, 双击可以看到 tooltip 的提示
<img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508103938.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508103938.png"></p>
<p>拖动可以部分选择,但部分选择时的弹框没有出现
<img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508104057.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508104057.png"></p>
<p>在 tooltip 显示的情况下拖动可以选择部分文本</p>
<p>另外测试了一下按钮的功能
copy paste 都无效,暂时没有和 macOS 系统的剪切板关联,其他系统的没测试,未知</p>
<p>使用系统的复制粘贴全选快捷键(cmd+c, cmd+v, cma+a)是可用的</p>
<h3 id="图片">图片</h3>
<h4 id="网络图片">网络图片</h4>
<p>简单截取一个图片,准备用于项目中,嗯,就是 google io 的演讲视频</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508104658.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508104658.png"></p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508104824.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508104824.png"></p>
<p>可以看到图片,能够正常显示</p>
<p>目前为止的代码如下</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#75715e">// Copyright 2018 The Chromium Authors. All rights reserved.
</span><span style="color:#75715e">// Use of this source code is governed by a BSD-style license that can be
</span><span style="color:#75715e">// found in the LICENSE file.
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_web/material.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#75715e">// This widget is the root of your application.
</span><span style="color:#75715e"></span>  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> MaterialApp(
      title: <span style="color:#e6db74">&#39;Flutter Demo&#39;</span>,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: <span style="color:#e6db74">&#39;Flutter Demo Home Page&#39;</span>),
    );
  }
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyHomePage</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  MyHomePage({Key key, <span style="color:#66d9ef">this</span>.title}) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(key: key);

  <span style="color:#66d9ef">final</span> <span style="color:#66d9ef">String</span> title;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  _MyHomePageState createState() <span style="color:#f92672">=&gt;</span> _MyHomePageState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_MyHomePageState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>MyHomePage<span style="color:#f92672">&gt;</span> {
  <span style="color:#66d9ef">int</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
  TextEditingController controller <span style="color:#f92672">=</span> TextEditingController();
  <span style="color:#66d9ef">var</span> key <span style="color:#f92672">=</span> GlobalKey();
  <span style="color:#66d9ef">void</span> add() {
    counter<span style="color:#f92672">++</span>;
    setState(() {});
    ScaffoldState state <span style="color:#f92672">=</span> key.currentState;
    state.showSnackBar(
      SnackBar(
        content: Text(controller.text),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      key: key,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
            TextField(
              controller: controller,
            ),
            Text(
              counter.toString(),
            ),
            Image.network(
                <span style="color:#e6db74">&#34;https://raw.githubusercontent.com/kikt-blog/image/master/img/20190508104658.png&#34;</span>),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: add,
        tooltip: <span style="color:#e6db74">&#39;push&#39;</span>,
        child: Icon(Icons.add),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> initState() {
    <span style="color:#66d9ef">super</span>.initState();
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> initState&#34;</span>);
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> dispose() {
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> dispose&#34;</span>);
    <span style="color:#66d9ef">super</span>.dispose();
  }
}
</code></pre></div><h4 id="本地资源文件">本地资源文件</h4>
<p><del>结论: 使用 Image.asset 失败了,没有图片显示</del> 经群中大佬解说,可以显示</p>
<p>目前使用约定式目录结构, 和桌面引擎的方式一致</p>
<p>必须放入<code>web/assets</code>目录下,不用在 pubspec 中声明</p>
<p>目录结构如下:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">web
├── assets
│   └── images
│       └── 20190508104658.png
├── index.html
└── main.dart
</code></pre></div><p>插入控件</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"> Image.asset(R.IMG_20190508104658_PNG),
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#75715e">/// generate by resouce_generator library, shouldn&#39;t edit.
</span><span style="color:#75715e"></span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">R</span> {
  <span style="color:#75715e">/// ![preview](file:///private/tmp/flutter_web/examples/hello_world/web/assets/images/20190508104658.png)
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">static</span> <span style="color:#66d9ef">const</span> <span style="color:#66d9ef">String</span> IMG_20190508104658_PNG <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;images/20190508104658.png&#34;</span>;
}
</code></pre></div><p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508155546.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508155546.png"></p>
<h4 id="内存图片">内存图片</h4>
<p>还是刚刚的图片, 这次经过 base64 编码后直接储存至 dart 文件中</p>
<p>然后通过如下的方式获取到项目中</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;dart:convert&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;dart:typed_data&#39;</span>;

Uint8List getImageList(<span style="color:#66d9ef">String</span> imageBase64) {
  <span style="color:#66d9ef">return</span> base64.decode(imageBase64);
}
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#75715e">// Copyright 2018 The Chromium Authors. All rights reserved.
</span><span style="color:#75715e">// Use of this source code is governed by a BSD-style license that can be
</span><span style="color:#75715e">// found in the LICENSE file.
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_web/material.dart&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;const/resource.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;img.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#75715e">// This widget is the root of your application.
</span><span style="color:#75715e"></span>  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> MaterialApp(
      title: <span style="color:#e6db74">&#39;Flutter Demo&#39;</span>,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: <span style="color:#e6db74">&#39;Flutter Demo Home Page&#39;</span>),
    );
  }
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyHomePage</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  MyHomePage({Key key, <span style="color:#66d9ef">this</span>.title}) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(key: key);

  <span style="color:#66d9ef">final</span> <span style="color:#66d9ef">String</span> title;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  _MyHomePageState createState() <span style="color:#f92672">=&gt;</span> _MyHomePageState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_MyHomePageState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>MyHomePage<span style="color:#f92672">&gt;</span> {
  <span style="color:#66d9ef">int</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
  TextEditingController controller <span style="color:#f92672">=</span> TextEditingController();
  <span style="color:#66d9ef">var</span> key <span style="color:#f92672">=</span> GlobalKey();
  <span style="color:#66d9ef">void</span> add() {
    counter<span style="color:#f92672">++</span>;
    setState(() {});
    ScaffoldState state <span style="color:#f92672">=</span> key.currentState;
    state.showSnackBar(
      SnackBar(
        content: Text(controller.text),
      ),
    );
  }

  <span style="color:#66d9ef">static</span> <span style="color:#66d9ef">var</span> divider <span style="color:#f92672">=</span> Container(
    padding: <span style="color:#66d9ef">const</span> EdgeInsets.symmetric(vertical: <span style="color:#ae81ff">10</span>),
    child: Text(<span style="color:#e6db74">&#34;我是分割线&#34;</span>),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.blue,
        width: <span style="color:#ae81ff">5</span>,
      ),
    ),
  );

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      key: key,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
            TextField(
              controller: controller,
            ),
            Text(
              counter.toString(),
            ),
            Image.network(
                <span style="color:#e6db74">&#34;https://raw.githubusercontent.com/kikt-blog/image/master/img/20190508104658.png&#34;</span>),
            divider,
            Image.asset(R.IMG_20190508104658_PNG),
            divider,
            Image.memory(getImageList(imageBase64)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: add,
        tooltip: <span style="color:#e6db74">&#39;push&#39;</span>,
        child: Icon(Icons.add),
      ),
    );
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> initState() {
    <span style="color:#66d9ef">super</span>.initState();
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> initState&#34;</span>);
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> dispose() {
    print(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.runtimeType<span style="color:#e6db74">}</span><span style="color:#e6db74"> dispose&#34;</span>);
    <span style="color:#66d9ef">super</span>.dispose();
  }
}

</code></pre></div><p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508132314.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508132314.png"></p>
<h3 id="滚动控件">滚动控件</h3>
<p>将 Column 替换为 ListView</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508135338.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508135338.png"></p>
<p>支持滚动</p>
<p>这里有一点要提,如果是刚进这个页面,鼠标的滚轮是无效的,也就是说,你需要在页面中随意点击一下才可以使用滚动滚动这个页面,似乎是为了让控件获得焦点</p>
<p>我将 ListView 设置为横向滚动,发生了错误,我将 TextField 注释掉以后,恢复了显示</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508135828.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508135828.png"></p>
<p>并且可以正常横向滚动,在 mac 中也支持 shift+滚动的左右滚动</p>
<h2 id="日志">日志</h2>
<p>使用 print 方法在 dart 文件中输出日志</p>
<p>可以在 chrome 的开发者工具的 console 中看到, 目前表现基本与浏览器中的 console.log 方法输出一致</p>
<h2 id="几个问题需要注意">几个问题需要注意</h2>
<h3 id="数字的类型">数字的类型</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">  print(<span style="color:#e6db74">&#34;1 is int : </span><span style="color:#e6db74">${</span><span style="color:#ae81ff">1</span> <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">int</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>); <span style="color:#75715e">// true
</span><span style="color:#75715e"></span>  print(<span style="color:#e6db74">&#34;1 is double : </span><span style="color:#e6db74">${</span><span style="color:#ae81ff">1</span> <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>); <span style="color:#75715e">// true
</span><span style="color:#75715e"></span>  print(<span style="color:#e6db74">&#34;1.0 is int : </span><span style="color:#e6db74">${</span><span style="color:#ae81ff">1.0</span> <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">int</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>); <span style="color:#75715e">// true
</span><span style="color:#75715e"></span>  print(<span style="color:#e6db74">&#34;1.0 is double : </span><span style="color:#e6db74">${</span><span style="color:#ae81ff">1.0</span> <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>); <span style="color:#75715e">// true
</span><span style="color:#75715e"></span>
  print(<span style="color:#ae81ff">1.</span>runtimeType); <span style="color:#75715e">// int
</span><span style="color:#75715e"></span>  print(<span style="color:#ae81ff">1.0</span>.runtimeType); <span style="color:#75715e">// int
</span></code></pre></div><p>这一点和 flutter, dartVM 中表现不一样,和 js 表现一致</p>
<p>而 runtimeType 中 1 和 1.0 都是 int 类型</p>
<h3 id="dartio-的问题">dart:io 的问题</h3>
<p>目前在编译过程中,如果发现了使用 dart:io 包的情况,就会自动忽略这个文件的编译</p>
<p>日志如下:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash"><span style="color:#f92672">[</span>WARNING<span style="color:#f92672">]</span> build_web_compilers:entrypoint on web/main.dart: Skipping compiling flutter_web.examples.hello_world|web/main.dart with ddc because some of its
transitive libraries have sdk dependencies that not supported on this platform:

flutter_web.examples.hello_world|lib/main.dart

https://github.com/dart-lang/build/blob/master/docs/faq.md#how-can-i-resolve-skipped-compiling-warnings
</code></pre></div><h3 id="插件的使用">插件的使用</h3>
<p>目前没有成熟的插件系统,也没有完成与纯 flutter 插件的对接</p>
<p>据说可以调用 js 的库来获取一些结果,<a href="https://github.com/flutter/flutter_web#limitations">官方的解释</a></p>
<h2 id="打包">打包</h2>
<p>使用 webdev 打包
<code>$ webdev build</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">webdev build
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> build_web_compilers:entrypoint on web/main.dart: Running dart2js with --minify --packages<span style="color:#f92672">=</span>.package-eb297017792c41ff65511a11729f572e -oweb/main.dart.js web/main.dart
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> build_web_compilers:entrypoint on web/main.dart: Dart2Js finished with:

Compiled 20,702,176 characters Dart to 4,249,785 characters JavaScript in 13.8 seconds
Dart file <span style="color:#f92672">(</span>web/main.dart<span style="color:#f92672">)</span> compiled to JavaScript: web/main.dart.js
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Running build completed, took 16.1s
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Caching finalized dependency graph completed, took 178ms
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Reading manifest at build/.build.manifest completed, took 13ms
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Deleting previous outputs in <span style="color:#e6db74">`</span>build<span style="color:#e6db74">`</span> completed, took 93ms
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Creating merged output dir <span style="color:#e6db74">`</span>build<span style="color:#e6db74">`</span> completed, took 780ms
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Writing asset manifest completed, took 2ms
<span style="color:#f92672">[</span>INFO<span style="color:#f92672">]</span> Succeeded after 17.2s with <span style="color:#ae81ff">9</span> outputs <span style="color:#f92672">(</span><span style="color:#ae81ff">2073</span> actions<span style="color:#f92672">)</span>
</code></pre></div><p>17 秒左右</p>
<p>在当前 build 文件夹下生成了一些文件</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508160650.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508160650.png"></p>
<p>这些文件直接本地打开 index.html 是跑不起来的</p>
<p>我这里借助了一个轻量的 web 服务器来做这个事</p>
<p><code>serve build</code></p>
<p>打开后和运行一样</p>
<p>看一下 build 文件夹的大小, 这里我要惊叹一声!!! 我&hellip; 56m !!!</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508160758.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508160758.png"></p>
<p>其中主要大小集中在<code>packages/$sdk</code>中,有 51m, <code>main.dart.js</code>有 1.2m ,这里因为我放入了那个 base64 的图片字符串充当图片来源, 这个 base64 的字符串在 txt 文件中是 3.2m,所以 main.dart.js 的大小我还算可以接受</p>
<p>assets 目录是 copy 过来的</p>
<p>使用 gz 格式压缩完有 11.4mb</p>
<p>所以这个称之为&quot;开发者预览&quot;是有道理的,后续看怎么优化大小吧,简单来说,这个大小即使在压缩完后也是不能接受的&hellip;</p>
<h2 id="查看一下-html-结构">查看一下 html 结构</h2>
<p>这里使用 web 开发者工具看看</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190508151024.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190508151024.png"></p>
<p>整体是一个控件,看来是和 iOS android 一样,直接绘制的</p>
<p>右边看到有一个 input 控件,然后 tanslate 了很长的距离, 应该是用于和内部输入框做双向绑定,以实现复制粘贴,光标等操作的双向绑定关系</p>
<h2 id="后记">后记</h2>
<p>简单来说,有一些 bug 和不足</p>
<ol>
<li>Icons 的图标不显示</li>
<li>文本不能选中</li>
<li>输入框的交互太移动端了</li>
<li>不支持插件</li>
<li>打包太大了</li>
</ol>
<p>仓库在这, 查看 <a href="https://gitee.com/kikt/flutter_web_first_use/tree/master/examples/hello_world">example/helloworld 目录</a></p>
<p>总结: 可用程度?暂时不可用</p>
<p>以上</p>

                        </div>

                        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/posts/flutter/dart/generators/">dart中的生成器函数</a></li>
        
        <li><a href="/posts/flutter/toast/oktoast/">flutter toast插件 OKToast的介绍</a></li>
        
        <li><a href="/posts/flutter/compare/version-compare/">Flutter 版本更新内容查看</a></li>
        
        <li><a href="/posts/flutter/android/flutter.gradle/">Flutter flutter.gradle分析</a></li>
        
        <li><a href="/posts/flutter/dialog/dialog-2/">Flutter dialog (2) - showGeneralDialog的使用</a></li>
        
    </ul>
</div>


                        <div class="post-meta meta-tags">
                            
                            <ul class="clearfix">
                                
                                <li><a href="http://www.kikt.top/tags/flutter">flutter</a></li>
                                
                                <li><a href="http://www.kikt.top/tags/flutter-web">flutter web</a></li>
                                
                            </ul>
                            
                        </div>
                    </article>
                    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "caijinglong/kikt-blog-comment"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
                </div>
            </div>
            <div id="secondary">
    <section class="widget">
        <form id="search" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="http://www.kikt.top">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="http://www.kikt.top/posts/java/crack/crack1/" title="使用javassist,修改jar包方法实现">使用javassist,修改jar包方法实现</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/github/actions/create/" title="Github action 的开发到发布">Github action 的开发到发布</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/jenkins&#43;fastlane/" title="flutter Jenkins&#43;fastlane 自动化打测试包, 并上传蒲公英">flutter Jenkins&#43;fastlane 自动化打测试包, 并上传蒲公英</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/go/compile-for-android/" title="编译 go 源码为 android 动态库(so)">编译 go 源码为 android 动态库(so)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/focusnode-2/" title="Flutter FocusNode 焦点那点事-(二)">Flutter FocusNode 焦点那点事-(二)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/focusnode-1/" title="Flutter FocusNode 焦点那点事-(一)">Flutter FocusNode 焦点那点事-(一)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/server/caddy/cros_for_local_dev/" title="用 Caddy 解决 web 开发中本地跨域的问题">用 Caddy 解决 web 开发中本地跨域的问题</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/route/navigator-helper2/" title="Navigator Helper2">Navigator Helper2</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/grey-app/" title="flutter 怎么实现app整体灰度">flutter 怎么实现app整体灰度</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/plugin/flutter-sdk-import-aar/" title="Flutter 插件开发之引入aar到安卓部分 并使用本地maven">Flutter 插件开发之引入aar到安卓部分 并使用本地maven</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li>
        <a href="http://www.kikt.top/categories/android/">android(25)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/caddy/">caddy(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/dart/">dart(5)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/docker/">docker(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/flutter/">flutter(60)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/github/">github(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/go/">go(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/golang/">golang(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/iOS/">iOS(6)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/ios/">ios(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/java/">java(6)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/jetbrains/">jetbrains(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/other/">other(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/python/">python(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/server/">server(5)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/spring/">spring(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/tools/">tools(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/%E6%9D%82%E9%A1%B9/">杂项(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/%E6%B6%82%E9%B8%A6/">涂鸦(1)</a>
    </li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="http://www.kikt.top/tags/10/">10</a>
    
    <a href="http://www.kikt.top/tags/2.3/">2.3</a>
    
    <a href="http://www.kikt.top/tags/Clipboard/">Clipboard</a>
    
    <a href="http://www.kikt.top/tags/Javassist/">Javassist</a>
    
    <a href="http://www.kikt.top/tags/Migrate/">Migrate</a>
    
    <a href="http://www.kikt.top/tags/aar/">aar</a>
    
    <a href="http://www.kikt.top/tags/actions/">actions</a>
    
    <a href="http://www.kikt.top/tags/aidl/">aidl</a>
    
    <a href="http://www.kikt.top/tags/android/">android</a>
    
    <a href="http://www.kikt.top/tags/androidQ/">androidQ</a>
    
    <a href="http://www.kikt.top/tags/androidX/">androidX</a>
    
    <a href="http://www.kikt.top/tags/apk/">apk</a>
    
    <a href="http://www.kikt.top/tags/app/">app</a>
    
    <a href="http://www.kikt.top/tags/appcode/">appcode</a>
    
    <a href="http://www.kikt.top/tags/azure/">azure</a>
    
    <a href="http://www.kikt.top/tags/ble/">ble</a>
    
    <a href="http://www.kikt.top/tags/bottomsheet/">bottomsheet</a>
    
    <a href="http://www.kikt.top/tags/butterknife/">butterknife</a>
    
    <a href="http://www.kikt.top/tags/c/">c</a>
    
    <a href="http://www.kikt.top/tags/caddy/">caddy</a>
    
    <a href="http://www.kikt.top/tags/camera/">camera</a>
    
    <a href="http://www.kikt.top/tags/cameraX/">cameraX</a>
    
    <a href="http://www.kikt.top/tags/channel/">channel</a>
    
    <a href="http://www.kikt.top/tags/cocoapods/">cocoapods</a>
    
    <a href="http://www.kikt.top/tags/cupertino/">cupertino</a>
    
    <a href="http://www.kikt.top/tags/dart/">dart</a>
    
    <a href="http://www.kikt.top/tags/dart-2.6/">dart-2.6</a>
    
    <a href="http://www.kikt.top/tags/desktop/">desktop</a>
    
    <a href="http://www.kikt.top/tags/dialog/">dialog</a>
    
    <a href="http://www.kikt.top/tags/dmg/">dmg</a>
    
    <a href="http://www.kikt.top/tags/doc/">doc</a>
    
    <a href="http://www.kikt.top/tags/docker/">docker</a>
    
    <a href="http://www.kikt.top/tags/docker-compose/">docker-compose</a>
    
    <a href="http://www.kikt.top/tags/excel/">excel</a>
    
    <a href="http://www.kikt.top/tags/exists/">exists</a>
    
    <a href="http://www.kikt.top/tags/faq/">faq</a>
    
    <a href="http://www.kikt.top/tags/fastlane/">fastlane</a>
    
    <a href="http://www.kikt.top/tags/ffi/">ffi</a>
    
    <a href="http://www.kikt.top/tags/ffmpeg/">ffmpeg</a>
    
    <a href="http://www.kikt.top/tags/flexmark/">flexmark</a>
    
    <a href="http://www.kikt.top/tags/flutter/">flutter</a>
    
    <a href="http://www.kikt.top/tags/flutter-web/">flutter-web</a>
    
    <a href="http://www.kikt.top/tags/focus/">focus</a>
    
    <a href="http://www.kikt.top/tags/focusNode/">focusNode</a>
    
    <a href="http://www.kikt.top/tags/form/">form</a>
    
    <a href="http://www.kikt.top/tags/framework/">framework</a>
    
    <a href="http://www.kikt.top/tags/github/">github</a>
    
    <a href="http://www.kikt.top/tags/go/">go</a>
    
    <a href="http://www.kikt.top/tags/golang/">golang</a>
    
    <a href="http://www.kikt.top/tags/gradle/">gradle</a>
    
    <a href="http://www.kikt.top/tags/http/">http</a>
    
    <a href="http://www.kikt.top/tags/iOS/">iOS</a>
    
    <a href="http://www.kikt.top/tags/ide/">ide</a>
    
    <a href="http://www.kikt.top/tags/idea/">idea</a>
    
    <a href="http://www.kikt.top/tags/index/">index</a>
    
    <a href="http://www.kikt.top/tags/inside/">inside</a>
    
    <a href="http://www.kikt.top/tags/ios/">ios</a>
    
    <a href="http://www.kikt.top/tags/java/">java</a>
    
    <a href="http://www.kikt.top/tags/jenkins/">jenkins</a>
    
    <a href="http://www.kikt.top/tags/jetbrains/">jetbrains</a>
    
    <a href="http://www.kikt.top/tags/jsdelivr/">jsdelivr</a>
    
    <a href="http://www.kikt.top/tags/json/">json</a>
    
    <a href="http://www.kikt.top/tags/json_serializable/">json_serializable</a>
    
    <a href="http://www.kikt.top/tags/junit/">junit</a>
    
    <a href="http://www.kikt.top/tags/library/">library</a>
    
    <a href="http://www.kikt.top/tags/live-template/">live-template</a>
    
    <a href="http://www.kikt.top/tags/loadmore/">loadmore</a>
    
    <a href="http://www.kikt.top/tags/log/">log</a>
    
    <a href="http://www.kikt.top/tags/mac/">mac</a>
    
    <a href="http://www.kikt.top/tags/macos/">macos</a>
    
    <a href="http://www.kikt.top/tags/maven/">maven</a>
    
    <a href="http://www.kikt.top/tags/mysql/">mysql</a>
    
    <a href="http://www.kikt.top/tags/navigationbar/">navigationbar</a>
    
    <a href="http://www.kikt.top/tags/navigator/">navigator</a>
    
    <a href="http://www.kikt.top/tags/ndk/">ndk</a>
    
    <a href="http://www.kikt.top/tags/nginx/">nginx</a>
    
    <a href="http://www.kikt.top/tags/oc/">oc</a>
    
    <a href="http://www.kikt.top/tags/opencv/">opencv</a>
    
    <a href="http://www.kikt.top/tags/poi/">poi</a>
    
    <a href="http://www.kikt.top/tags/pub/">pub</a>
    
    <a href="http://www.kikt.top/tags/python/">python</a>
    
    <a href="http://www.kikt.top/tags/retrofit/">retrofit</a>
    
    <a href="http://www.kikt.top/tags/route/">route</a>
    
    <a href="http://www.kikt.top/tags/server/">server</a>
    
    <a href="http://www.kikt.top/tags/so/">so</a>
    
    <a href="http://www.kikt.top/tags/spp/">spp</a>
    
    <a href="http://www.kikt.top/tags/sprintboot/">sprintboot</a>
    
    <a href="http://www.kikt.top/tags/swift/">swift</a>
    
    <a href="http://www.kikt.top/tags/tap/">tap</a>
    
    <a href="http://www.kikt.top/tags/thymeleaf/">thymeleaf</a>
    
    <a href="http://www.kikt.top/tags/tips/">tips</a>
    
    <a href="http://www.kikt.top/tags/toast/">toast</a>
    
    <a href="http://www.kikt.top/tags/transition/">transition</a>
    
    <a href="http://www.kikt.top/tags/ui/">ui</a>
    
    <a href="http://www.kikt.top/tags/utf8/">utf8</a>
    
    <a href="http://www.kikt.top/tags/yield/">yield</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%8C%E8%BF%9B%E5%88%B6/">二进制</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%A4%E5%8F%89/">交叉</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%A4%E5%8F%89%E7%BC%96%E8%AF%91/">交叉编译</a>
    
    <a href="http://www.kikt.top/tags/%E4%BB%8B%E7%BB%8D/">介绍</a>
    
    <a href="http://www.kikt.top/tags/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/">代码规范</a>
    
    <a href="http://www.kikt.top/tags/%E5%86%B2%E7%AA%81/">冲突</a>
    
    <a href="http://www.kikt.top/tags/%E5%8A%A8%E6%80%81/">动态</a>
    
    <a href="http://www.kikt.top/tags/%E5%8F%91%E5%B8%83/">发布</a>
    
    <a href="http://www.kikt.top/tags/%E5%8F%AF%E6%89%A7%E8%A1%8C/">可执行</a>
    
    <a href="http://www.kikt.top/tags/%E5%9B%BE%E5%BA%8A/">图床</a>
    
    <a href="http://www.kikt.top/tags/%E5%9F%8E%E5%B8%82/">城市</a>
    
    <a href="http://www.kikt.top/tags/%E5%A4%A7%E6%96%87%E4%BB%B6/">大文件</a>
    
    <a href="http://www.kikt.top/tags/%E5%B7%A5%E5%85%B7/">工具</a>
    
    <a href="http://www.kikt.top/tags/%E5%B7%B2%E6%9C%89%E9%A1%B9%E7%9B%AE/">已有项目</a>
    
    <a href="http://www.kikt.top/tags/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/">开发环境</a>
    
    <a href="http://www.kikt.top/tags/%E6%80%BB%E7%BB%93/">总结</a>
    
    <a href="http://www.kikt.top/tags/%E6%85%A2/">慢</a>
    
    <a href="http://www.kikt.top/tags/%E6%89%93%E5%8C%85/">打包</a>
    
    <a href="http://www.kikt.top/tags/%E6%89%AB%E7%A0%81/">扫码</a>
    
    <a href="http://www.kikt.top/tags/%E6%8F%92%E4%BB%B6/">插件</a>
    
    <a href="http://www.kikt.top/tags/%E6%96%87%E6%A1%A3/">文档</a>
    
    <a href="http://www.kikt.top/tags/%E6%A8%A1%E6%9D%BF/">模板</a>
    
    <a href="http://www.kikt.top/tags/%E6%B8%B2%E6%9F%93/">渲染</a>
    
    <a href="http://www.kikt.top/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/">源码解析</a>
    
    <a href="http://www.kikt.top/tags/%E7%81%B0%E5%BA%A6/">灰度</a>
    
    <a href="http://www.kikt.top/tags/%E7%82%B9%E5%87%BB/">点击</a>
    
    <a href="http://www.kikt.top/tags/%E7%84%A6%E7%82%B9/">焦点</a>
    
    <a href="http://www.kikt.top/tags/%E7%88%AC%E8%99%AB/">爬虫</a>
    
    <a href="http://www.kikt.top/tags/%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/">状态管理</a>
    
    <a href="http://www.kikt.top/tags/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE/">百度地图</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E7%A0%81/">编码</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E7%A8%8B%E6%8A%80%E5%B7%A7/">编程技巧</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E8%AF%91/">编译</a>
    
    <a href="http://www.kikt.top/tags/%E7%BF%BB%E8%AF%91/">翻译</a>
    
    <a href="http://www.kikt.top/tags/%E8%93%9D%E7%89%99/">蓝牙</a>
    
    <a href="http://www.kikt.top/tags/%E8%A1%A8%E5%8D%95/">表单</a>
    
    <a href="http://www.kikt.top/tags/%E8%B7%AF%E7%94%B1/">路由</a>
    
    <a href="http://www.kikt.top/tags/%E8%BF%87%E5%9C%BA%E5%8A%A8%E7%94%BB/">过场动画</a>
    
    <a href="http://www.kikt.top/tags/%E9%9A%90%E7%A7%81/">隐私</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://github.com/Caijinglong" title="我的Github">我的Github</a>
        </li>
        
        <li>
            <a target="_blank" href="https://flutter.dev" title="flutter 官网">flutter 官网</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="http://www.kikt.top/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        <div>
            <p>如果我的blog对您有帮助,而您愿意捐赠 😆, 可以用下面的二维码</p>
            <img style="width:5rem;" src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424141834.png"/>
            <img style="width:5rem; padding-left: 2rem;" 
            src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424141931.png"/>
            <img style="width:5rem; padding-left: 2rem;" 
            src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424142013.png"/>
        </div>
        &copy; 2018 <a href="http://www.kikt.top">caijinglong的博客 By caijinglong</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="http://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/rujews/maupassant-hugo" target="_blank">maupassant</a>.<br/>
        本站所有内容基于<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" style="color:coral">CC4.0</a>协议发布,需要转载必须署名
        <br/>
        如果有问题可以<a href="mailto:cjl_spy@163.com">email联系我</a>
        <br/>
        京ICP备18038473号-1
        
    </div>
</footer>


    <script type="text/javascript" src="/js/prism.js" async="true"></script>
    <script type="text/javascript">
    
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())

    window.MathJax = {
        tex2jax: {
            inlineMath: [ ['$','$'] ],
            processEscapes: true
        }
    };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src="/js/totop.js?v=0.0.0" async=""></script>



<script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




</body>
</html>
